@import "lib-mixins";
@import "lib-rem";
@import "lib-reset";

@import "com-header";
@import "com-left-menu";

html,body{
  height: 100%;
}
.operate-cover{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0);
  position: fixed;
  z-index: 12;
  top:0;
  left:0;
  display: none;
}
.operate-box{
  width: 60px;
  height: 60px;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 13;
  .main-btn{
    color:#fff;
    background-color:#DB4437 ;
    width: 60px;
    height: 60px;
    text-align: center;
    display: block;
    line-height: 60px;
    border-radius: 50%;
    box-shadow: 2px 0 10px #939393,0 2px 10px #939393;
    z-index: 14;
    position: relative;
  }
  .alert-btn{
    width: 40px;
    height: 40px;
    background-color: #000;
    color:#fff;
    border-radius: 50%;
    position: absolute;
    top:0;
    left:0;
    text-align: center;
    line-height: 40px;
    z-index: 13;
    opacity: 0;
    transition: all .2s ease;
  }
}
.operate-box.active{
  .alert-btn{
    opacity: 1;
  }
  .a1{
    transform: translate(-10px, -60px) rotate(360deg);
  }
  .a2{
    transform: translate(-60px, -10px) rotate(360deg);
  }
}
.inner-box{
  width: 98%;
  margin: 0 auto;
  background: #fff;
}
.tab-list{
  overflow: hidden;
  position: relative;
  top: -20px;
  border-top:1px solid #77BAF4;
  background: #4583EF;
  text-align: center;
  box-shadow: 0 1px 4px #383535;
  .tab-item{
    display: inline-block;
    color: #fff;
    font-size: 15px;
    text-align: center;
    margin: 0 32px 0 0;
    padding: 14px 0;
  }
  .tab-item.active{
    border-bottom: 4px solid #fff;
    padding: 14px 0 10px;
  }
}
.form-outer{
  position: relative;
  padding: 10px 10px 0;
  max-width: 1055px;
  margin: 0 auto;
}
.form-box{
  overflow-x: hidden;
  overflow-y: auto;
  .empty-tips{
    text-align: center;
    font-size: 18px;
    color: #888;
    margin: 40px 0 0;
  }
}
.fixed-bar{
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  border-bottom: 1px solid #ccc;
  overflow: hidden;
  .title{
    float: left;
    font-size: 14px;
    margin: 18px 0 0 0;
    color: #444;
    strong{
      color:#bbb;
      font-weight: normal;
    }
    .form-link{
      color: #0fb2fc;
    }
    .form-title{
      color: #999;
    }
  }
  .btn-group{
    float: right;
    i{
      vertical-align: text-top;
      color: #409EEF;
    }
    .save-btn{
      float: right;
      margin: auto 0 auto 15px
    }
  }
}
.form-base{
  .form-group{
    display: inline-block;
    width: 100%;
    label{
    margin-top: 12px;
    color: #000;
    float:left;
    font-size: 14px;
     }
    .form-control{
      float: left;
      margin-left: 40px;
      width: e("calc(100% - 107px)");
      font-size: 14px;
    }
    .author-list{
      position: absolute;
      background: #fff;
      left: 85px;
      top: 36px;
      z-index: 2;
      width: e("calc(100% - 96px)");
      border:1px solid #e9e9e9;
      max-height: 202px;
      overflow: auto;
      display: none;
      .author-item{
        cursor: pointer;
        margin: 0;
        padding:4px 10px;
        &:hover{
          background: #DAF0FF;
        }
      }
    }
  }
}
.form-node{
  padding-top: 30px;
  .node-item-box{
    overflow: hidden;
    position: relative;
    padding: 0 10px 30px;
    &:before{
      content: '';
      width: 1px;
      height: 100%;
      position: absolute;
      left:10px;
      top:0;
      background: #ccc;
    }
    .left-index{
        position: absolute;
        top:0;
        left:0;
        color: #fff;
        background:#409EEF;
        font-size: 14px;
        border-radius: 50%;
        width:22px;
        height: 22px;
        text-align: center;
        line-height: 22px;
    }
    .content-box{
      float: left;
      margin-left:30px;
      border-bottom:1px dashed #ccc;
      width: e('calc(100% - 40px)');
      .head{
        p{
          display: inline-block;
          color: #444;
          font-size: 14px;
          margin-right: 5px;
        }
        span{
          color: #ccc;
          font-size: 12px;
        }
      }
      .node-list{
        ul{
          float: left;
          margin-bottom:5px;
          width: e('calc(100% - 100px)');
          li{
            float: left;
            margin: 3px 10px 3px 0;
            padding: 0 10px;
            font-size: 12px;
            border-radius: 2px;
            cursor: pointer;
            line-height: 28px;
            height: 28px;
            i{
              font-size: 17px;
              vertical-align: middle;
              margin-right: 2px;
            }
            span{
              vertical-align: middle;
            }
          }
          .gray{
            border:1px solid #999;
            overflow: hidden;
          }
          .blue{
            color: #0fb2fc;
            border:1px dashed;
            position: relative;
            .del-form{
              position: absolute;
              top: -10px;
              right: -9px;
              width: 18px;
              height: 18px;
              background: #DADADA;
              text-align: center;
              line-height: 18px;
              border-radius: 50%;
              font-size: 17px;
              color: #848181;
              cursor: pointer;
              display: none;
            }
            &:hover .del-form{
              display: block;
            }
            a{
              color: inherit;
              display: block;
            }
          }
        }
        .operate-group{
          float: right;
          i{
            color: #409EEF;
            margin: 0 20px 0 0;
            font-size: 25px;
            &:hover{
              color:#8CCDEA;
            }
          }
          .delete-icon{
            background-image: url('../slice/icon_delete_normal.png');
            background-repeat: no-repeat;
            vertical-align: middle;
            margin-top: 1px;
            &:hover{
              background-image: url('../slice/icon_delete_hover.png');
            }
          }
        }
      }
    }
  }
  &>.node-item-box:nth-last-of-type(1):before{
    background: transparent;
  }
  /*消除begin-node中的最后一个左侧边线*/
  #beginNode .box-especially:before{
    background: transparent;
  }
}
/*弹出框===============================================*/
.modal .modal-footer{
  padding: 7px !important;
}
#editPointone .checkbox label, .radio label, label{
  color: #444444;
}

#editPointone ,
#editPointtwo,
#editPointthr,
#editPointfour,
#timeNode{
  .close{
    color: #fff;
    opacity: 1;
    font-size: 22px;
    margin-top: -5px;
    padding: 7px 10px;
    margin-right: -15px;
  }
  .modal-header{
    background-color: #3F9EEE;
    color: #fff;
    padding-top: 12px;
    padding-bottom: 12px;
  }
}
#editPointone .modal-body{
  margin-bottom: 20px;
}
#editPointone  .radio label, label{
  font-size: 14px;
}
#editPointtwo .modal-body,
#editPointthr .modal-body,
#editPointfour .modal-body,
#timeNode .modal-body{
  max-height: 500px;
  overflow-y: auto;
}
#editPointtwo .modal-body,
#editPointthr .modal-body,
#timeNode .modal-body{
  padding: 0 15px;
}
#editPointfour .modal-body{
  padding: 0 8px;
}
.text-modal1{
  font-size: 12px;
  width: 90%;
  margin-left: 45px;
  padding-right: 15px;
  color: #666666;
}
//样式开始
.bd-title{
  font-size: 15px;
  margin: 15px 0;
}
#editPointtwo,#editPointthr,#timeNode{
  .form-group{
    margin: 0 0 10px 0;
  }
}
.by1 .bd-bd{
  width: 100%;
  font-size: 12px;
  margin-bottom: 15px;
  padding-bottom: 2px;
  overflow: hidden;
  label{
    padding: 0px;
    font-size: 12px;
    color: #444444;
  }
  .bd-md{
    width: 122px;
    padding: 0px;
    margin-top: 3px;
  }
  .bd-btm{
    margin-top: 15px;
    margin-left: 10px;
    width: 56%;
    color: #999999;
  }
  .color-grey{
    color: #999999;
  }
  select{
    width: 120px;
    margin-left: 6px;
    font-size: 12px;
  }
  input{
    width: 120px;
    margin-left: 6px;
    font-size: 12px;
  }
  .togglebutton label{
    margin-top: -20px;
  }
}
#describe,#describeRepeat,#describeTime{
  margin-bottom: 15px;
  padding-top: 10px;
  label{
    color: #444444;
    font-size: 12px;
  }
  textarea{
    margin-left: 6px;
    margin-top: -6px;
    resize: none;
    height: 60px;
    width: 120px;
    border: 1px solid rgba(169, 169, 169, 0.62);
  }
  textarea:focus{
    border: 2px solid #3F9EEE;
    outline: none;
  }
  .bd-btm{
    margin: 0 0 0 8px;
  }
}
.abdate{
  display: none;
}
.by2 .bd-bd{
  font-size: 12px;
  margin-bottom: 15px;
  padding-left: 28px;
  select{
    width: 120px;
    height: 27.5px;
    margin-left: 2px;
  }
  span{
    margin-left: 6px;
    color: #999;
  }
}
.by3 .bd-bd{
  font-size: 12px;
  margin-bottom: 20px;
  padding-left: 28px;
}
//第三个bd  模板2和3有区别
#editPointtwo{
  .by1 .bd-bd:nth-of-type(4){
    padding-left: 4px;
  }
}
#specialBd,#specialBody {
  input{
    width: 70px;
    margin-left: 2.5px;
  }
  .bd-btm{
    margin-left: 5px;
  }
  >div:first-child {
    width: 180px;
    padding: 0px;
    label{
      margin-left: 4px;
      width: 100px;
    }
    div{
      padding: 0 0 0 6px;
      margin-top: 3px;
    }
  }
  >div:nth-of-type(2){
    padding: 0;
    width: 50px;
    margin-top: 3px;
    select{
      width: 43px;
    }
  }

}
.bd-title>span{
  font-size: 16px;
}
.bd-title>i{
  font-size: 14px;
  color:#3F9EEE ;
}
.special{
  font-size: 12px;
  color: #999;
}
//消除checkbox的before影响
#editPointtwo .checkbox .checkbox-material:before,
#editPointthr .checkbox .checkbox-material:before,
#timeNode .checkbox .checkbox-material:before{
  display: none;
}
#editPointtwo .globol,
#editPointthr .globol,
#timeNode .globol{
  padding-left: 5px;
  label:first-child{
    color: #444444;
  }
}
//调节checkbox的外形
#editPointtwo .checkbox label,
#editPointthr .checkbox label,
#timeNode .checkbox label{
  font-size: 14px;
  font-weight: 100;
  color: #716969;

}
#editPointtwo .checkbox .checkbox-material .check,
#editPointthr .checkbox .checkbox-material .check,
#timeNode .checkbox .checkbox-material .check{
  width: 16px;
  height: 16px;
  border: 1px solid rgba(0,0,0,.4);
  display: inline-block;
  margin-top: -9px;
}
.by3 .bd-bd{
  position: relative;
  >label{
    font-size: 12px;
    color: #444444;
    padding: 0px;
    margin-left: -13px;
  }
  >.checkbox{
    margin: -2px 0 0 0;
    font-size: 12px;
    label:nth-of-type(2){
      margin-left: 26px;
    }
  }
  .form-group{
    font-size: 12px;
    width: 240px;
    position: absolute;
    top: -14px;
    right: 61px;
    label{
      padding: 0px;
      font-size: 12px!important;
      color: #444444;
    }
    div{
      width: 120px;
      padding: 0px;
      input{
        font-size: 12px;
        margin-top: 3px;
      }
    }
  }
}
#editPointtwo .by3 .togglebutton,
#editPointthr .by3 .togglebutton,
#timeNode .by3 .togglebutton{
  padding-left: 34px;
  label{
    margin-left: 6px;
  }
  span{
    margin-left: 2px;
    color: #999999;
  }
}
//改变滑块的样式
#editPointtwo .togglebutton label .toggle,
#editPointthr .togglebutton label .toggle,
#timeNode .togglebutton label .toggle{
  width: 24px;
  height: 11px;
}
#editPointtwo .togglebutton label .toggle:after,
#editPointthr .togglebutton label .toggle:after,
#timeNode .togglebutton label .toggle:after{
  width: 15px;
  height: 15px;
}

//调整日期表里面
th{
  text-align: center;
}
//调整所有输入框的样式
input{
  border: 1px solid darkgray;
  padding: 4px 5px;
}


//第四个模板的的table=======================================
#editPointfour{
  .radio{
    margin-top: 12px;
    margin-bottom: 5px;
  }
  .popuptable{
    width: 100%;
    background: #fff;
    margin:0 auto;
    th{
      padding:15px 10px !important;
      text-align: center !important;
    }
    tbody tr{
      border-bottom: 1px solid rgba(169, 169, 169, 0.4);
      cursor: pointer;
    }
    tr:hover{
      background-color: #DEF2FF;
    }
    td{
      padding: 1px 10px !important;
      vertical-align: middle !important;
      text-align: center;
      a>i{
        color: #409EEF;
        margin: 0 5px;
        font-size: 25px;
        &:hover{
          color:#8CCDEA;
        }
      }
    }
    thead{
      background: #ECECEC;
      color:#444444;
      th{
        font-weight: normal;
        border:none !important;
      }
    }
    tbody{
      td .material-icons{
        color: #5FAEF2;
        margin: 0 5px;
      }
    }
  }
}
.check-more{
  display: block;
  text-align: center;
  color: #409EEF;
  margin: 10px auto;
  padding: 10px;
  width: 140px;
  &:hover,&:focus{
    color: #0089FF;
  }
}
.loading{
  color: #666;
  font-size: 24px;
  animation: loading 0.9s linear infinite;
}


